<template>
    <div class="content_base">
        <div class="upTo">
            <h2 class='title'>{{year}}年{{mouth}}月份前期工作进度月报信息</h2>
            <el-form :model="detialMes" label-position = 'right' class="clearfix">
              <el-form-item label="圩堤名称：">
                <div class="addWid">{{detialMes.dikeName}}</div>
              </el-form-item>
              <el-form-item label="所在设区市：">
                <div >{{detialMes.city}} </div>
              </el-form-item>
              <el-form-item label="属地：">
                <div >{{detialMes.county}} </div>
              </el-form-item>  
              <el-form-item label="所在河流：">
                <div>{{detialMes.inRivers}} </div>
              </el-form-item>
              <el-form-item label="保护面积（万亩）：">
                  <div>{{detialMes.protectArea}} </div>
              </el-form-item>
              <el-form-item label="耕地面积（万亩）：">
                  <div>{{detialMes.protectCultivateArea}}</div>
              </el-form-item>
              <el-form-item label="保护（受益）人口（万人）：" class="reduceWid">
                  <div class="detialdata" >{{detialMes.protectPeople}}</div>
              </el-form-item>
              <el-form-item label="堤线长度（km）：">
                  <div>{{detialMes.dikeLength}}</div>
              </el-form-item>
              <el-form-item label="用地预审：">
                <div>{{detialMes.landPreExam}}</div>
              </el-form-item>
              <el-form-item label="选址规划：">
                <div>{{detialMes.planAddress}}</div>
              </el-form-item>
              <el-form-item label="可研报告：">
                <div>{{detialMes.researchReport}}</div>
              </el-form-item>
              <el-form-item label="可研批复投资（万元）：" class="reduceWid" >
               <div>{{detialMes.permissibleInvest}}</div> 
              </el-form-item>
              <el-form-item label="初设（代可研）报告：">
               <div>{{detialMes.initReport}} </div>
              </el-form-item>
              <el-form-item label="初设批复治理长度（km）：" class="reduceWid">
                 <div>{{detialMes.initPermissiableLength}}</div>
              </el-form-item>
              <el-form-item label="初设批复投资（万元）：" class="reduceWid">
                <div>{{detialMes.initPermissibleInvest}}</div> 
              </el-form-item>
              <el-form-item label="投标--分标段（个）：">
                 <div>{{detialMes.tenderCase}}</div>
              </el-form-item>
              <el-form-item label="投标--招标金额（万元）：" class="reduceWid">
                 <div>{{detialMes.tenderCapital}}</div>
              </el-form-item>
              <el-form-item label="投标--招标是否完成：">
                 <div>{{detialMes.tenderSuccess}}</div>
              </el-form-item>
              <el-form-item label="是否开工：">
                 <div>{{detialMes.start}}</div>
              </el-form-item>
              <el-form-item label="存在问题：">
                  <div>{{detialMes.existProblem}}</div>
              </el-form-item>
              <el-form-item label="备注：">
                  <div>{{detialMes.note}}</div>
              </el-form-item>
              <el-form-item label="上报人：">
                  <div>{{detialMes.reportPeople}}</div>
              </el-form-item>
              <el-form-item label="市级审批人：">
                  <div>{{detialMes.cityApprover}}</div>
              </el-form-item>
              <el-form-item label="市评语：">
                  <el-input type="textarea"
                     v-model="detialMes.cityContent"
                     class="content"
                     disabled
                    :autosize="{ minRows: 4,maxRows:4}"></el-input>
              </el-form-item>
              <el-form-item label="省级审批人：">
                  <div>{{detialMes.provinceApprover}}</div>
              </el-form-item>
              <el-form-item label="省评语：">
                  <!-- <div>{{detialMes.provinceContent}}</div> -->
                  <el-input type="textarea"
                     v-model="detialMes.provinceContent"
                     class="content"
                     disabled
                    :autosize="{ minRows: 4,maxRows:4}"></el-input>
              </el-form-item>
            </el-form>
            <!-- 是否可以审批   涉及等级和当前前等级用户是否进行了审批-->
            <!-- v-if需变为VshengP---------------------- -->
            <div slot="footer" class="dialog-footer clearfix" v-if="VshengP">
                   <h3>审批</h3>
                   <el-form class="clearfix" label-width='150px' :rules="rules" ref="isAdopt" :model="isAdopt">
                       <el-form-item label="审批人：" prop="approver">
                            <el-input v-model="isAdopt.approver"></el-input>
                       </el-form-item> 
                   <el-form-item label="审批内容：">
                      <el-input type="textarea"
                        v-model="isAdopt.content"
                        class="content"
                        placeholder="驳回或者通过的理由，可为空"
                       :autosize="{ minRows: 5,maxRows:5}"></el-input>   
                   </el-form-item>
                  </el-form>  
                  <div class="btn">
                       <el-button @click="isAdoptM('isAdopt','0')">驳回</el-button>
                       <el-button type="primary" @click="isAdoptM('isAdopt','1')">通过</el-button>
                  </div>  
            </div>
             <!-- <div slot="footer" class="dialog-footer" v-if="!VshengP">           
               
            </div> -->
        </div>
    </div>
</template>
<script>
import Bus from '../../Bus.js'
export default {
    data(){
        return{
        //本条数据的特征参数
          localData:{
               dikeCode:null,
               reportDate:null,
           },
        //数据信息------上报的数据
         detialMes:{
                  dikeName:'', 
                  city:'', 
                  county:'',
                  protectArea:'',//保护面积
                  protectCultivateArea:'',//保护耕地面积
                  protectPeople:'',//保护人口
                  dikeLength:"",//堤线长度
                  landPreExam: '',//用地预审
                  planAddress: '',//规划选址
                  researchReport: '',//可研报告
                  permissibleInvest:'',//可批复投资
                  dikeCode: '',
                  initReport: '',//初设报告
                  initPermissiableLength:'',//可批复长度
                  initPermissibleInvest:'',//初设可批复投资
                  tenderCase:'',//分标段
                  tenderCapital:'',//招标金额
                  tenderSuccess: '',//招标是否成功1-成功  2-失败
                  existProblem: '',//存在问题
                  start:'',//是否开工1--开工0--为开工
                  state:'',//上报的状态
                  reportPeople:''//上报人
         },
         proCode:'',
         //驳回或者通过
         isAdopt:{
             code:'',
             approver:'',
             content:'',
         },
         rules:{
             approver:[
                 { required: true, trigger: 'blur',message:'必填项，请填写审批人姓名' }
             ]
         },
         //用户信息
         leval:'',
         //时间的控制和用户等级是否可见
         VshengP:false,
         year:'',
         mouth:''
        }
    },
    methods:{
        //驳回还是通过----省级驳回和市级驳回
        isAdoptM(isAdopt,code){
          var _this = this 
          this.$refs[isAdopt].validate((valid) => {
             if (valid) {
                 isAdopt = _this[isAdopt]
                 isAdopt.code = code
                var thisUrl = this.leval==2?`/cityreview/reviewproearlyinfo/${this.proCode}`:`/provincereview/reviewprocessinfo/${this.proCode}`
                this.$axios.post(thisUrl,this.isAdopt).then(function(res){
                    var data =  res.data.responseMessage
                    if(data=='审批成功'){
                        var mes = code=='0'?'驳回成功':'审批已通过'
                       _this.$message({
                          message: mes,
                          type: 'success'
                        });
                        Bus.$emit('changestate')
                        _this.$router.push({name:'prejinzhang'})
                      }else{
                          _this.$message({
                          message: data
                        });
                     }
                }).catch(function(err){
                    console.log(err)
                })
               } else {
               return false;
              }
           });
        },
        //获得基本的三条数据，并将它push进总的数据中
        getBaseData(){
            var _this = this ;
             var thisDate = (new Date()).getTime()
            this.$axios.get(`/dikeInfo/getdikeinfobycode/${this.localData.dikeCode}`,{params:{
                thisDate:thisDate}
              }).then(function(res){
                  var data  = res.data.responseData
                  _this.detialMes.dikeName =data.dikeName
                  _this.detialMes.city =data.city
                  _this.detialMes.county =data.county
            })
        },
        //用户获取此条圩堤的信息
       getData(){
          var _this = this;
          var thisDate = (new Date()).getTime()
          this.$axios.get(`/projectearly/getprojectinfo/${this.localData.dikeCode}`,{params:{
              reportDate:this.localData.reportDate,
              thisDate:thisDate
              }}).then(function(res){
               var codeMes = res.data.responseCode
               if(codeMes=='101'){
                       _this.$router.push({name:'login'})
                 }else{
                  var data =res.data.responseData
                  if(data){
                      _this.proCode = data.projectEarlyCode
                   for(var item in data){
                           _this.detialMes[item] = data[item]
                   }
                  }
                  _this.getBaseData()
                  _this.hasShengP(_this.leval,_this.detialMes.state,_this.detialMes.rejected)
                  }
             }).catch(function(err){
                 console.log(err)
          })
       },
       //市或省获取此条圩堤的信息
    //    getData23(){ 
    //        var _this = this
    //        var thisUrl = this.leval==2?`/cityreview/getproearlyinfo/${this.localData.dikeCode}`:`/provincereview/getproEarlyinfo/${this.localData.dikeCode}`
    //        this.$axios.get(thisUrl).then(function(res){
    //             var data = res.data.responseData;
    //             console.log(data)
    //             console.log(data.length)
    //             if(data.length!=0){  
    //               _this.proCode = data[0].projectEarlyCode
    //                  for(var item in data[0]){
    //                      _this.detialMes[item] = data[0][item]
    //                  }
    //             //j将遍历成空
    //             for(var item in data[0]){
    //               if(_this.detialMes[item]=='0'){
    //                  _this.detialMes[item] = ''
    //               }
    //              }
    //             }
    //             _this.getBaseData(_this.detialMes)
    //             console.log(_this.detialMes)
    //              _this.VshengP = _this.hasShengP(_this.leval,_this.detialMes.state)
               
    //        }).catch(function(err){
    //        })
    //    }
        
  },
    mounted(){
        var _this = this
        this.localData.dikeCode = this.$route.params.dikeCode;
        this.localData.reportDate = this.$route.params.reportDate;
        this.mouth = this.$route.params.reportDate.substr(4,2)
        this.year  = this.$route.params.reportDate.substr(0,4)
        //判断是否可以审批
        // this.$axios.get('/utilcontroller /getData').then(function(res){
        //       var data = res.data.responseData
        //       var data1 = data.substr(0,6)
        //       data1 = parseInt(data1)
        //       var today = data.substr(6,2)//是否八号前
        //       today = parseInt(today)
        //       if(data1==parseInt(_this.localData.reportDate||_this.leval!=1)){
        //             _this.VshengP = today<=8?true:false
        //       }else{
        //           _this.VshengP = false
        //       }
        // })
            this.getData()
       

        //获取表格数据数据并进行
     
    },
  created(){
      var storage =window.localStorage;
      this.leval =storage.getItem('level')

     
  },
}
</script>


<style scoped>
 .clearfix:after{
        content: '';
        height: 0;
        clear: both;
        display: block;
   }
  .title{
       height: 100px;
       line-height: 100px;
   }
   .upTo{
       width: 90%;
       margin: 0 auto;
   }
   .upTo .el-form{
       margin: 0 auto;
   }
   .upTo .el-form-item{
       width: 40%;
       float: left;
       margin-left:5% 
   }
   .el-input,.el-textarea{
       width: 52%;
       float: right;
   }
   .el-textarea{
       width: 250px!important
   }
   .dialog-footer{
       margin-top:100px;
       /* line-height: 300px; */
       /* background: #f0ffff; */
       border-top:1px solid #eee;
   }
  /* .dialog-footer[data-v-5e19321e]{
      line-height: 100px;
  } */
  .dialog-footer .content{
      float: left;
      width: 500px;
      margin-left:200px
  }
  .dialog-footer[data-v-07e9bf90]{
      line-height: 100px;
  }
  h3{
      text-align: left;
      margin-left: 70px;
  }
   .el-form-item__content div{
       width:150px;
       float: left;
       text-align: left;
       margin-left:10%;
       
   }
   .el-form-item__content .addWid{
      width:162px;
   }
   /* .content[data-v-5e19321e]{
       float: left;
       position: relative;
       left: 120px;
       width: 400px;
   } */
   .el-form-item__content .content[data-v-5e19321e][data-v-5e19321e]{
       width: 55%;
       
   }
   .dialog-footer .el-form{
       width: 600px;
       float: left;
       margin-left: 10%
   }
   .dialog-footer .el-form-item{
       /* display: block */
       float: none;
       width: 90%;
       float: left;
   }
   /* .dialog-footer .content{
        margin-left: 10px;
   } */
  
   .dialog-footer .el-input,.dialog-footer .content{
        margin-left: 10px;
        width: 300px!important;
        float: left;
   }
  .dialog-footer .btn{
        width: 200px;
        float: left;
        margin-top: 100px
  }
  /* label太长时做相应的减小 */
 .reduceWid .detialdata {
     width:35px!important;
 }
 .reduceWid .el-form-item__content div{
     width: 100px
 }
</style>
